<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <link rel="stylesheet" href="css/留言板.css">
</head>
<body>
	<div id="parent">
		<h4>留言内容：</h4>
		<div id="box">
			<em id="em">这里会显示留言内容……</em>
		</div>
		<textarea id="text"></textarea><br />
		<input id="btn" type="button" value="发表留言" />
	</div>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/*
		在JQ中所有的事件都是通过addEventListener绑定的，所以当使用事件的时候
		如果不解除前一次绑定，那么容易出现事件重复执行。
		解决：
			off().click()  解除上一次的事件
		*/
		var $parent = $('#parent'),
			$btn = $parent.find('#btn'),
			$text = $parent.find('#text'),
			$box = $parent.find('#box'),
			$em = $parent.find('#em'),
			num = 0;

		//绑定点击事件
		$btn.click(function () {
			let val = $text.val(); // 获取到文本域的内容；
			let $p = $(
				`<p class="grey"><i>${++num}.</i><b>${val}</b><span class="hide"><a href="javascript:;">确定删除</a><strong style="color:red">第${num}条</strong></span></p>`
			);
			$box.append($p); //添加方法
			// 当鼠标划上p标签时，让当前的标签背景变成黄色；
			$p.mouseover(function () {
				// this --> 转成jquery的实例
				// attr : 设置行间属性,找到该元素下的span，将其class设置为show;
				$(this).attr("class", "yellow").find("span").attr("class", "show");
			})
			$p.mouseout(function () {
				// this --> 转成jquery的实例
				$(this).attr("class", "grey").find("span").attr("class", "hide");
			})
			// 点击确定删除，删除该条信息
			$p.find("a").click(function () {
				$(this).parent().parent().remove();
				let allI = $box.find("i");
				let allStrong = $box.find("strong");
				for (let i = 0; i < allI.length; i++) {
					$(allI[i]).text(`${i+1}.`);
					$(allStrong[i]).text(`第${i+1}条`);
				}
				// 如果length为0；说明没有了标签，让em再次显示；
				if (allI.length === 0) {
					$em.css("display", "block");
				}
				// 每删除一条就把全局num-1;
				num--;
			})
			$text.val("");
			$em.css("display", "none")
		})
	</script>
</body>

</html>